<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button onclick="add()">添加</button>
    <button onclick="del()">删除</button>
    <button onclick="rep()">替换</button>
    <div></div>
    <script>

        function add(){
            var img=document.createElement("img");
            img.setAttribute("src","../lagou-html/img/0001.jpg");
            img.setAttribute("title","伞兵");
            img.setAttribute("id","girl");

            
            var divs=document.getElementsByTagName("div");
            divs[0].appendChild(img);
        }


        function del(){
            var img=document.getElementById("girl");
            img.parentNode.removeChild(img); //必须通过父节点才能删除子节点
        }


        function rep(){
            // 通过修改元素的属性 做的替换
            //var imgold=document.getElementById("girl");
            //img.setAttribute("src","../lagou-css/img/list-img-1.gif");


            var imgold=document.getElementById("girl");
            var imgnew=document.createElement("img");
            imgnew.setAttribute("src","../lagou-css/img/list-img-1.gif");
            imgold.parentNode.replaceChild(imgnew,imgold);
        }
    </script>
</body>
</html>